import React, { useState, FC } from 'react'
import { connect } from 'dva'
import { formatTimestamp, locationCode } from '@/utils'
import { Statistics } from '@/components'
import { icon } from '@/config'
import { Tabs } from 'antd'

import FilterTemp from './components/filter'

import ListTemp from './components/list'
import List2Temp from './components/list2'
import pageConfig from './config/pageConfig'
const { namespace, pageName } = pageConfig
const { TabPane } = Tabs

interface PageProps {}

const Page: FC<PageProps> = (props: any) => {
    const {
        actions,
        [namespace]: {
            filterCondition,
            spinning,
            tableRadioGroup,
            fields,
            pagination,
            list,
            confirmLoading,
            formEditConditions,
            filterCondition2,
            list2,
            formEdit2Conditions,
            tableList2,
            pagination2,
        },
    }: any = props
    // 筛选组件参数
    const filterProps = {
        spinning,
        filterCondition,
        onSearch: (payload: any) => {
            actions.handleSearch({
                ...payload,
            })
        },
        onReset: () => {
            actions.handleSearch({})
        },
    }
    // 筛选组件参数
    const filterProps2 = {
        spinning,
        filterCondition: filterCondition2,
        onSearch: (payload: any) => {
            actions.handleSearch2({
                ...payload,
            })
        },
        onReset: () => {
            actions.handleSearch2({})
        },
    }

    const listProps = {
        actions,
        spinning,
        fields,
        pagination,
        list,
        onChange: (page: any, filter: any) => {
            const { current, pageSize } = page

            let payload: any = {
                pn: current,
                ps: pageSize,
            }

            actions.fetchList(payload)
        },
    }

    const list2Props = {
        actions,
        spinning,
        fields: tableList2,
        pagination: pagination2,
        list: list2,
        confirmLoading,
        formEditConditions: formEdit2Conditions,
        onChange: (page: any, filter: any) => {
            const { current, pageSize } = page

            let payload: any = {
                pn: current,
                ps: pageSize,
            }

            actions.fetchList2(payload)
        },
    }

    return (
        <>
            <div className='pageTitle'>{pageName}</div>
            <div className='pageBox'>
                <div className='contentPrimary'>
                    <Tabs defaultActiveKey='1' size='large'>
                        <TabPane tab='商品管理' key='1'>
                            <FilterTemp {...filterProps} />
                            <ListTemp {...listProps} />
                        </TabPane>
                        <TabPane tab='商品(店铺)上架管理' key='2'>
                            <FilterTemp {...filterProps2} />
                            <List2Temp {...list2Props} />
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        </>
    )
}

// 配置model
const mapStateToProps = (props: any) => {
    return {
        [namespace]: props[namespace],
    }
}

// 处理状态
const mapDispatchToProps = (dispatch: any) => {
    return {
        actions: {
            handleSearch(payload: any) {
                dispatch({
                    type: `${namespace}/updateState`,
                    payload: {
                        filterParams: payload,
                    },
                })
                dispatch({
                    type: `${namespace}/fetchList`,
                    payload: {
                        ...payload,
                        pn: 1,
                        ps: 10,
                    },
                })
            },
            fetchList(payload: any) {
                dispatch({
                    type: `${namespace}/fetchList`,
                    payload,
                })
            },

            handleSearch2(payload: any) {
                dispatch({
                    type: `${namespace}/updateState`,
                    payload: {
                        filterParams2: payload,
                    },
                })
                dispatch({
                    type: `${namespace}/fetchOptList`,
                    payload: {
                        ...payload,
                        pn: 1,
                        ps: 10,
                    },
                })
            },
            fetchList2(payload: any) {
                dispatch({
                    type: `${namespace}/fetchOptList`,
                    payload,
                })
            },

            fetchShelve(payload: any) {
                dispatch({
                    type: `${namespace}/fetchShelve`,
                    payload,
                })
            },
            fetchPublish(payload: any) {
                dispatch({
                    type: `${namespace}/fetchPublish`,
                    payload,
                })
            },

            fetchUpdateQty(payload: any) {
                dispatch({
                    type: `${namespace}/fetchUpdateQty`,
                    payload,
                })
            },
        },
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Page)
